<template>
  <div>
    <h3 class="article-title">
      置顶推荐
    </h3>
    <div class="article-list" style="background:#fff;">
      <!--成功-->
      <div v-if="topData.status">
        <ul class="article_top">
          <li class="article_top_left" v-for="item in topData.data.reset" :key="item.id">
            <router-link :to="`details/${item._id}`">
              <img :src="`/randoms/${parseInt(Math.random()*10+1)}.jpg`" alt="分享一个滚动条插件模拟插件">
              <h2>{{item.formTitle}}</h2>
              <p v-html="item.formAbout">
              </p>
            </router-link>
          </li>
      </ul>
      </div>
      <!--默认-->
      <div v-else>
        <img src="../assets/images/default-img-02.png" style="width:100%" alt="">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    topData: {
      type: Object,
      default: function() {
        return {
          status: 0,
          data: []
        };
      }
    }
  }
};
</script>
<style lang="less" scoped>
.article-title{position:relative;margin:0;padding:7px 20px 6px;height:35px;border-bottom:1px solid #eaeaea;background-color:#eaeaea;color:#00a2ca;font-weight:400;font-size:15px;line-height:35px}
/*top*/
.article_top{ overflow: hidden; padding: 10px 0;}
.article_top li {width:50%;float:left; padding: 10px 0; margin-bottom:1px; overflow: hidden}
.article_top li a { display: block;}
.article_top a:hover{opacity:0.85;filter:alpha(opacity=85);}
.article_top_left a{margin-right:1px;}
.article_top li img {float:left; margin:0 15px; max-width:100px;max-height:68px;}
.article_top h2 {overflow:hidden;font-size:14px;margin:0;font-weight:normal;height:23px;line-height:23px;overflow:hidden;color:#00a2ca;}
.article_top p {overflow:hidden;height:40px;color:#999999;font-size:13px;line-height:20px;margin:0;}
</style>


